<template>
  <div class="cms-search-bar" :class="`style_${type}`">
    <div class="leading">LOGO</div>
    <div class="middle">
      <span class="placeholder">蓝军出击</span>
      <SearchOutlined />
    </div>
    <div class="trailing">
      <StarOutlined v-if="type !== 3" />
      <template v-else>筛选</template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsSearchBarProps from './props'
import { SearchOutlined, StarOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsSearchBarProps,
  components: {
    SearchOutlined,
    StarOutlined
  }
})
</script>

<style scoped lang="less">
.cms-search-bar {
  height: 48px;
  width: 375px;
  @apply flex  items-stretch gap-x-4 px-4 py-2;
  .leading {
    color: #ff613f;
    @apply w-10 bg-white text-xs font-medium flex items-center justify-center rounded;
  }
  .middle {
    @apply flex-1 text-xl;
    .placeholder {
      color: #b4b8bf;
      @apply text-xs;
    }
  }
  .trailing {
    color: #4b5363;
    @apply flex items-center text-xl;
  }
  &.style_1 {
    background: #ffece5;
    .middle {
      @apply bg-white rounded-full px-4 flex justify-between items-center;
      .anticon-search {
        color: #ff613f;
      }
    }
  }
  &.style_2 {
    background: #ffffff;
    .leading {
      background: #f8f8f8;
    }
    .middle {
      background: #f8f8f8;
      @apply rounded-full px-4 flex justify-center flex-row-reverse items-center gap-x-2;
      .anticon-search {
        color: #ff613f;
      }
    }
  }
  &.style_3 {
    background-image: linear-gradient(134deg, #ffbf5c 0%, #ff613f 100%);
    .middle {
      background: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.8);
      @apply rounded-sm px-4 flex justify-end flex-row-reverse items-center gap-x-2;
      .placeholder {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .trailing {
      background: rgba(255, 255, 255, 0.3);
      @apply text-white text-sm w-12 flex items-center justify-center;
    }
  }
}
</style>
